import { PureComponent } from "react"
import { isNull, filterTemplate, calcField } from "../../utils/helper"
import F2 from "@antv/f2/lib/index-all"
import MAction from '../MAction/MAction';

interface Props {
  list: any[],
  height?: any,
  componentStyle?: object,
  event_key?: string
}
interface State {

}

export default class MiMiniRadar extends PureComponent<Props, State> {
  private chart: any;
  private canvasId = Math.random() + new Date().getTime() + "";
  private wrapper: any;
  public state: State = {

  }
  renderText = (item, obj = {}) => {
    if (isNull(item)) {
      return null;
    }
    else {
      let { text } = item;
      text = calcField(text, obj);
      return text;
    }
  }
  componentWillReceiveProps(nextProps: Props) {
    let { list: oldList } = this.props;
    let { list: newList } = nextProps;
    if (!_.isEqual(oldList, newList)) {
      setTimeout(() => {
        this.renderChart(nextProps)
      })
    }
  }
  renderChart(nextProps) {
    this.chart.clear();
    let props = nextProps || this.props;
    let { dataset_key, list = [] } = props;
    if (!isNull(dataset_key) && isNull(list)) {
      return;
    }
    let chart = this.chart;
    chart.coord('polar');

    chart.source(list, {
      y: {
        min: 0,
        max: 100,
        nice: false,
        tickCount: 5
      }
    });
    chart.tooltip({
      custom: true, // 自定义 tooltip 内容框
      onChange: function onChange(obj) {
        var legend = chart.get('legendController').legends.left[0];
        var tooltipItems = obj.items;
        var legendItems = legend.items;
        var map = {};
        legendItems.map(function (item) {
          map[item.name] = _.clone(item);
        });
        tooltipItems.map(function (item) {
          var name = item.name;
          var value = item.value;
          if (map[name]) {
            map[name].value = value;
          }
        });
        legend.setItems(_.values(map));
      },
      onHide: function onHide() {
        var legend = chart.get('legendController').legends.left[0];
        legend.setItems(chart.getLegendItems().country);
      }
    });
    chart.axis('y', {
      label: function label(text, index, total) {
        if (index === total - 1) {
          return null;
        }
        return {
          top: true
        };
      },
      grid: {
        lineDash: null,
        type: 'arc' // 弧线网格
      }
    });
    chart.axis('x', {
      grid: {
        lineDash: null
      }
    });
    chart.legend({
      position: "left"
    })
    chart.legend();
    chart.line().position('x*y').color('z');
    chart.point().position('x*y').color('z').style({
      stroke: '#fff',
      lineWidth: 1
    });
    chart.render();
  }
  componentDidMount() {
    let { width } = this.wrapper.getBoundingClientRect();
    let { list, height } = this.props;
    if (isNull(height)) {
      height = window.innerWidth > window.innerHeight ? window.innerHeight - 54 : window.innerWidth * 0.618;
    }
    this.chart = new F2.Chart({
      id: this.canvasId,
      // width: window.innerWidth,
      width: width,
      height: height,
      pixelRatio: window.devicePixelRatio
    });
    this.renderChart(list);
  }
  render() {
    let { componentStyle } = this.props;
    return (
      <div ref={e => this.wrapper = e} style={{ ...componentStyle }} onClick={(e) => {
        e.preventDefault()
        e.stopPropagation()
        MAction({ ...this.props }, this.props.event_key);
      }}>
        <div className="chart-wrapper">
          <canvas id={this.canvasId} />
        </div>
      </div>
    )
  }
}

/*
雷达图
数据源为[{"x":"办公室","y":10,"z":"张三"},{"x":"办公室","y":100,"z":"李四"}]格式 z为分组 x为各个指标 y为指标的值 源汇总所有y值的和
var config ={
  "component_type":"mi-miniradar",
  "height":100,//图标的高度
  "dataset_key":"",//数据源
  "componentStyle":{},
  "event_key":""
}
*/